<template>
  <div>
    <div class="pay_box">
      <el-form>
        <el-form-item>
          <userSearch
            v-model="form.visitUserId"
            style="width: 200px; margin-right: 20px"
          ></userSearch>
          <el-date-picker
            v-model="form.startTime"
            class="pay_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="随访开始日期"
          ></el-date-picker
          >----
          <el-date-picker
            style="marigin-left: 4%"
            v-model="form.endTime"
            class="pay_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="随访结束日期"
          ></el-date-picker>
          <el-button
            type="primary"
            circle
            icon="el-icon-search"
            @click="getChartTable(-1)"
          ></el-button>
          <el-button type="primary" style="float: right" @click="exportExcel()"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="pay_box">
      <el-row :gutter="20">
        <el-col :span="24">
          <table class="table-box">
            <thead>
              <tr>
                <th style="text-align: center; font-size: 18px" colspan="6">
                  随访人员统计报表
                </th>
              </tr>
              <tr>
                <th>随访人员</th>
                <th>随访占比</th>
                <th>随访人数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tabList" :key="index">
                <td>{{ item.name }}</td>
                <td>{{ item.percentage }}</td>
                <td>{{ item.number }}</td>
              </tr>
              <!-- <tr>
                <td>合计</td>
                <td>{{visitTotal==0?0:100}}%</td>
                <td>{{visitTotal}}</td>
              </tr>-->
            </tbody>
          </table>
          <br />
          <pager
            v-model="pager"
            :total="pager.total"
            @change-pagenum="getChartTable"
          ></pager>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Excel from "@/_js/excel.js";
export default {
  data() {
    return {
      form: {
        startTime: "",
        endTime: "",
        type: 5,
        visitUserId: "",
      },
      orderDayCount: {
        subsequentVisitTotal: 0,
        firstVisitTotal: 0,
      },
      pager: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      showDay: false,
      tabList: [],
      chart: null,
    };
  },
  mounted() {
    this.form.startTime = this.getDate();
    this.form.endTime = this.getNewDate();
    this.getChartTable();
  },
  methods: {
    getChartTable() {
      this.showLoading();
      let j = Object.assign(this.form, this.pager);
      this.$api
        .getVisitStatistics(j)
        .then((res) => {
          if (res.executed) {
            const list = res.dataBody.list;
            this.tabList = list;
            const chartName = [];
            const chartData = [];

            list.forEach((it) => {
              chartName.push(it.name);
              chartData.push({ name: it.name, value: it.number });
            });
            let total = list.reduce((cur, nex) => {
              cur += nex.number;
              return cur;
            }, 0);
            this.tabList.push({
              name: "合计",
              percentage: total > 0 ? "100%" : "0%",
              number: total,
            });
            this.pager.total = res.dataBody.total;
            this.showLoading(false);
          } else {
            this.$message.error(res.message);
            this.showLoading(false);
          }
        })
        .catch((error) => {
          this.showLoading(false);
        });
    },
    exportExcel() {
      Excel(
        this.tabList,
        [
          { key: "name", name: "随访类型" },
          { key: "percentage", name: "随访占比" },
          { key: "number", name: "随访人数" },
        ],
        "随访人员统计"
      );
    },
  },
  components: {
    userSearch: () => import("@/pages/_com/userSearch"),
  },
};
</script>
<style lang="scss" scoped>
.pay_box {
  margin-top: 10px;
  display: inline-block;
  width: 100%;
  // overflow-x: auto;
  .table-box {
    min-width: 600px;
    font-size: 12px;
  }
}
.pay_date {
  width: 10% !important;
  margin-right: 1%;
}
.chart_box {
  display: inline-block;
  width: 100%;
  height: 400px;
}
</style>